<template>
	<view class="ts-flex ts-column ts-flex-item">

		<view class="ts-flex ts-row">
			<view class="ts-flex ts-column ts-flex-item" style="align-items:flex-start; justify-content: flex-end; height: 400upx;"
			 :style="'background-image:url('+coverUrl+');background-size: 100% 100%;'">
				<view class="ts-flex ts-column ts-padding">
					<view class="ts-flex ts-row">
						<text class="ts-flex ts-row ts-h3">2018校青山湖读书协会年会</text>
					</view>
					<view class="ts-flex ts-row">
						<text class="ts-flex ts-row ts-h4">六号楼6501</text>
					</view>
					<view class="ts-flex ts-row">
						<view class="ts-flex ts-row">#ID:32001#</view>
						<view class="ts-flex ts-row ts-padding-left">#已报人数:21/不限#</view>
					</view>
				</view>
			</view>
		</view>


		<view class="ts-flex ts-column ts-flex-item">
			<ts-segmented-control :values="tabs" v-model="currentTab" style-type="text" active-color="#d81e06" borderColor="#d81e06"></ts-segmented-control>

			<view class="ts-flex ts-row" style="padding: 20upx;">
				<view v-show="currentTab === 0" class="ts-flex ts-column ts-flex-item">
					<!-- 详情 -->

					<view class="ts-flex ts-row">
						<view class="ts-flex ts-row">
							<view class="ts-flex ts-row ts-margin-right">
								<image src="/static/photo.jpg" style="width: 80upx; height: 80upx;"></image>
							</view>
							<view class="ts-flex ts-column">
								<view class="ts-flex ts-row ts-h5 ts-text-bold">校青山湖读书协会</view>
								<view class="ts-flex ts-row ts-h5">校级，社团与协会，学术科技类</view>
							</view>
						</view>
						<view class="ts-flex ts-row ts-flex-item" style="justify-content: flex-end;">
							<ts-badge type="primary" text="73"></ts-badge>
						</view>
					</view>


				</view>
				<view v-show="currentTab === 1" class="ts-flex ts-column ts-flex-item">
					<!-- 信息 -->

					<view class="ts-flex ts-h4 ts-text-bold">时间范围</view>
					<view class="ts-flex ts-row ts-h5" style="justify-content: space-between;">
						<view class="ts-flex">报名时间</view>
						<view class="ts-flex">2018.10.16 08:00-2018.10.30 24:00</view>
					</view>
					<view class="ts-flex ts-row ts-h5" style="justify-content: space-between;">
						<view class="ts-flex">活动时间</view>
						<view class="ts-flex">2018.10.16 08:00-2018.10.30 24:00</view>
					</view>
					<view class="ts-gap"></view>

					<view class="ts-flex ts-h4 ts-text-bold">活动级别</view>
					<view class="ts-flex ts-h5" style="justify-content: space-between;">
						<view class="ts-flex">本次活动级别</view>
						<view class="ts-flex">
							<ts-badge type="danger" text="校级"></ts-badge>
						</view>
					</view>
					<view class="ts-gap"></view>


					<view class="ts-flex ts-h4 ts-text-bold">报名人数</view>
					<view class="ts-flex ts-h5" style="justify-content: space-between;">
						<view class="ts-flex">当前活动报名人数限制</view>
						<view class="ts-flex">
							<ts-badge type="danger" :inverted="true" text="200"></ts-badge>
						</view>
					</view>
					<view class="ts-gap"></view>

					<view class="ts-flex ts-h4 ts-text-bold">学分设置</view>
					<view class="ts-flex ts-h5" style="justify-content: space-between;">
						<view class="ts-flex">学时</view>
						<view class="ts-flex">学分2，名额2000</view>
					</view>
					<view class="ts-gap"></view>

					<view class="ts-flex ts-h4 ts-text-bold">活动标签</view>
					<view class="ts-flex ts-h5" style="justify-content: space-between;">
						<view class="ts-flex ts-row">当前活动标签</view>
						<view class="ts-flex ts-row">
							<ts-badge type="warn" text="主题讲座"></ts-badge>
							<ts-badge type="warn" text="参观学习" padding-left="20"></ts-badge>
						</view>
					</view>
					<view class="ts-gap"></view>

				</view>

				<view v-show="currentTab === 2" class="ts-flex ts-column ts-flex-item">
					<!-- 人员 -->
					<view class="ts-flex">
						<view class="ts-flex">
							<view class="ts-flex ts-margin-right">
								<image src="/static/photo.jpg" style="width: 80upx; height: 80upx;"></image>
							</view>
							<view class="ts-flex ts-column">
								<view class="ts-flex ts-h5 ts-text-bold">李万里</view>
								<view class="ts-flex ts-h5">广州番禺职业技术学院信息工程学院</view>
							</view>
						</view>
						<view class="ts-flex ts-flex-item" style="justify-content: flex-end;">
							<view class="ts-flex">
								<ts-badge type="primary" text="负责人"></ts-badge>
							</view>
						</view>
					</view>
					<view class="ts-gap"></view>


					<view class="ts-flex ts-row">
						<view class="ts-flex ts-row">
							<view class="ts-flex ts-row ts-margin-right">
								<image src="/static/photo.jpg" style="width: 80upx; height: 80upx;"></image>
							</view>
							<view class="ts-flex ts-column">
								<view class="ts-flex ts-row ts-h5 ts-text-bold">张菲菲</view>
								<view class="ts-flex ts-row ts-h5">广州番禺职业技术学院信息工程学院</view>
							</view>
						</view>
						<view class="ts-flex ts-row ts-flex-item" style="justify-content: flex-end;">
							<ts-badge type="warn" text="组织者"></ts-badge>
						</view>
					</view>
					<view class="ts-gap"></view>


				</view>

				<view v-if="currentTab === 3" class="ts-flex ts-column ts-flex-item">
					<!-- 位置 ,这里用v-show地图在APP中不显示-->
					<view class="ts-flex ts-row">
						<map id="mapid" :latitude="latitude" :longitude="longitude" :show-location="true" :scale="scale" :markers="markers"
						 :controls="true">
						</map>
					</view>
				</view>
			</view>

		</view>


		<view style="width: 100%; height: 100upx;">
		</view>

		<view class="ts-flex ts-row" style="position: fixed; bottom: 0;left: 0; right: 0; width: 100%; height: 100upx; border-top: #CCCCCC solid 1upx; z-index: 1; background: #FFF;">
			<view class="ts-flex ts-row ts-flex-item" style="justify-content: center; align-items: center;">
				<text class="ts-flex ts-row ts-h5">不在活动规定院系</text>
			</view>
			<view class="ts-flex ts-row ts-flex-item">
				<ts-button type="danger" :height="100">
					<text class="ts-flex ts-row ts-h4">报名</text>
				</ts-button>
			</view>
		</view>


	</view>
</template>

<script>
	import tsSegmentedControl from '@/components/teaset/components/ts-segmented-control.vue';
	import tsIcon from '@/components/teaset/components/ts-icon.vue';
	import tsButton from '@/components/teaset/components/ts-button.vue';
	import tsBanner from '@/components/teaset/components/ts-banner.vue';
	import tsBadge from '@/components/teaset/components/ts-badge.vue';

	var self;
	export default {
		components: {
			tsSegmentedControl,
			tsIcon,
			tsButton,
			tsBanner,
			tsBadge
		},
		//{"type":"gcj02","latitude":22.902757,"longitude":113.311673,"speed":0,"accuracy":30,"errMsg":"getLocation:ok"} 
		data() {
			return {
				currentTab: 0,
				tabs: ['详情', '信息', '人员', '位置'],
				coverUrl: 'http://placehold.it/750x500',
				latitude: 22.902757,
				longitude: 113.311673,
				scale: 18, //地图缩放级别：5-18
				// markers: [],
				markers: [{
					latitude: 22.902757,
					longitude: 113.311673,
					iconPath: '/static/location.png'
				}]
			}
		},
		onLoad() {
			self = this;
		},
		onShow() {
			//显示当前位置
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function(res) {

					console.log(JSON.stringify(res))
					const latitude = res.latitude;
					const longitude = res.longitude;

					self.latitude = latitude;
					self.longitude = longitude;
					self.markers = [{
						latitude: latitude,
						longitude: longitude,
						iconPath: '/static/location.png',

						label: {
							content: '我的位置',
							color: '#FF0000'
						}
					}];

					//移动到当前位置
					let mapContext = uni.createMapContext("mapid", self);
					mapContext.moveToLocation({
						latitude: latitude,
						longitude: longitude,
					});

				},
			})
		},
	};
</script>

<style>
	page {
		font-size: 32upx;
		/* line-height: 1.6; */
	}

	view {
		display: flex;
		flex-direction: row;
		/* border: #000000 solid 1px; */
	}

	.ts-gap {
		background-color: #FFFFFF;
	}

	map {
		width: 100%;
		height: 550upx;
	}
</style>
